<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风速风向玫瑰图</title>
     <!-- 引入下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个定义了高宽的 DOM 容器 -->
    <div id="echarts" style="width: 900px;height:900px;"></div>
</body>
</html>
<script>
    /*本示例使用的图表类型：极坐标系下的堆叠柱状图
      图表查看：角度代表风向，颜色代表风速，远离中心的长度即浮动提示框中的数字表示该风向出现的频率
    */

    //定义数组用于图例-风速划分
    legendName = ["0.1-2.3 m/s", "2.3-4.5 m/s", "4.5-6.7 m/s", "6.7-8.9 m/s", "8.9-11.0 m/s", "11.0-13.2 m/s", "13.2-15.4 m/s", "15.4-17.6 m/s"];
    //通过 echarts.init 方法初始化一个 echarts 实例，并通过 setOption 方法生成图表
    echarts.init(document.getElementById('echarts')).setOption({
        // 指定图表的配置项和数据
        //设置提示框组件
        tooltip: {
            trigger: 'item',//触发类型:'item'数据项图形触发,'axis'坐标轴触发,'none'什么都不触发
            fontSize: 16,
            color: '#fff',
            fontFamily: 'Microsoft YaHei',
            valueFormatter: (value) => value + '%'//数值显示部分的格式化回调函数
        },
        //设置图表颜色
        color: ["#0001F7", "#00B8FE", "#00FFFF", "#00FF68", "#BEFE00", "#FFFF00", "#FFA800", "#E10100"],
        //极坐标系的角度轴
        angleAxis: {
            zlevel: 2,//zlevel 用于 Canvas 分层，不同 zlevel 值的图形会放置在不同的 Canvas 中，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。Canvas 分层是一种常见的优化手段,需要注意的是过多的 Canvas 会引起内存开销的增大。
            type: 'category',//坐标轴类型:'value' 数值轴,'category' 类目轴,'time' 时间轴,'log' 对数轴。类目轴适用于离散的类目数据，类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 angleAxis.data 设置类目数据。
            data: [
                { value: '北' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '东北' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '东' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '东南' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '南' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '西南' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '西' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
                { value: '西北' },
                { value: '' }, { value: '' }, { value: '' }, { value: '' }, { value: '' },
            ],//设置类目数据，设置为48种风向，只在8个主风向显示标签，其他的都设置为空

            boundaryGap: false,//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            //设置坐标轴刻度
            axisTick: {
                show: false//是否显示坐标轴刻度
            },
            show: true,
            //设置坐标轴在 grid 区域中的分隔线
            splitLine: {
                show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
                lineStyle: {
                    //color:"black"
                },
            },
            //设置坐标轴刻度标签
            axisLabel: {
                show: true,
                interval: 5,//坐标轴刻度标签的显示间隔
            },
        },
        //极坐标系的径向轴
        radiusAxis: {
            min: 0,
            max: 100,
            /*radiusAxis.min：坐标轴刻度最小值，可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
            在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
            当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。radiusAxis. max:坐标轴刻度最大值同理。*/
            zlevel: 3,
            axisLabel: {
                formatter: '{value}%',          //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。本示例使用字符串模板，模板变量为刻度默认标签 {value}。
                fontSize: 15,                   //文字的字体大小
                fontFamily: 'Microsoft YaHei',  //文字的字体系列
                //margin: -25,                  //刻度标签与轴线之间的距离
                //color: 'black',               //刻度标签文字的颜色，默认取 axisLine.lineStyle.color
                //padding: 5,                   //文字块的内边距
                //width: 25,                    //文本显示宽度
                //backgroundColor: 'lightgray', //文字块背景色
                //borderColor: 'black',         //文字块边框颜色
                //borderWidth: 1,               //文字块边框宽度
                rich: {
                    //在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
                }
            },
            axisTick: {
                show: false//是否显示坐标轴刻度
            },
            axisLine: {
                show: true,//是否显示坐标轴轴线
            },
        },
        //将图表定义为极坐标系
        polar: {
            //可设置相关属性，也可默认
        },
        //设置系列
        series: [{
            barCategoryGap: 0,//柱形间隙
            type: 'bar',//bar:柱状图
            //zlevel: 1,
            data: [17, 2, 18, 4,
                2, 3, 4, 6,
                1, 6, 3, 4,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 6,
                1, 3, 3, 4,
                2, 3, 4, 6,
                2, 7, 4, 5,
                1, 2, 3, 1,
                2, 3, 2, 6,
                1, 2, 3, 1,],         //在本示例中，共声明8个柱状图，这些柱状图以极坐标系的极点为中心进行堆叠。每个柱状图中包含48个柱形，这些柱形具有相同风速，距离极轴的角度代表风向，data[]中的数值代表频率。
            coordinateSystem: 'polar',//该系列使用的坐标系，'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。'polar'使用极坐标系，通过 polarIndex 指定相应的极坐标组件。
            name: legendName[0],      //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            stack: 'a',               //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
            //图形样式
            itemStyle: {
                borderColor: 'black',
                //borderWidth: 1,
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [7, 12, 13, 2,
                2, 3, 4, 6,
                1, 2, 3, 2,
                2, 3, 4, 6,
                1, 2, 3, 5,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 1,
                2, 3, 4, 1,
                1, 2, 2, 4,
                2, 3, 5, 1,
                1, 2, 3, 1,],
            coordinateSystem: 'polar',
            name: legendName[1],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [10, 12, 13, 4,
                2, 13, 14, 26,
                11, 12, 23, 34,
                12, 33, 34, 32,
                11, 22, 23, 24,
                2, 23, 24, 6,
                21, 2, 3, 4,
                2, 3, 4, 6,
                12, 13, 4, 6,
                11, 32, 32, 14,
                12, 33, 24, 41,
                1, 2, 3, 1,],
            coordinateSystem: 'polar',
            name: legendName[2],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [10, 2, 13, 2,
                2, 3, 4, 6,
                1, 2, 3, 2,
                2, 3, 4, 6,
                1, 2, 3, 5,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 1,
                2, 3, 4, 1,
                1, 2, 2, 4,
                1, 2, 3, 1,
                2, 3, 5, 1,],
            coordinateSystem: 'polar',
            name: legendName[3],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [10, 2, 13, 4,
                2, 3, 4, 6,
                1, 2, 3, 4,
                1, 2, 3, 1,
                2, 3, 4, 2,
                1, 2, 3, 4,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 6,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 1,],
            coordinateSystem: 'polar',
            name: legendName[4],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [10, 2, 13, 2,
                2, 3, 4, 6,
                1, 2, 3, 2,
                1, 2, 3, 1,
                2, 3, 4, 6,
                1, 2, 3, 5,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 1,
                2, 3, 4, 1,
                1, 2, 2, 4,
                2, 3, 5, 1,],
            coordinateSystem: 'polar',
            name: legendName[5],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [10, 2, 13, 4,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 2,
                1, 2, 3, 4,
                2, 3, 4, 6,
                1, 2, 3, 4,
                1, 2, 3, 1,
                2, 3, 4, 6,
                2, 3, 4, 6,
                1, 2, 3, 4,
                2, 3, 4, 1,],
            coordinateSystem: 'polar',
            name: legendName[6],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }, {
            barCategoryGap: 0,
            type: 'bar',
            data: [0, 0, 0, 0,
                0, 0, 0, 0,
                0, 0, 0, 0,
                0, 0, 0, 0,
                0, 0, 0, 0,
                1, 2, 3, 1,
                0, 0, 0, 0,
                1, 2, 3, 4,
                2, 3, 4, 1,
                0, 0, 0, 0,
                1, 2, 2, 4,
                2, 3, 2, 1,],
            coordinateSystem: 'polar',
            name: legendName[7],
            stack: 'a',
            itemStyle: {
                borderColor: 'black',
            }
        }],
        //设置图例
        legend: {
            show: true,
            data: legendName,
            width: 500,//可通过设置宽度调整换行
        }
        /*legend.data：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。
          如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。*/
    });
</script>
 